<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>帮我选卡</title>

    <!-- styles here -->
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../css/Public_CSS.css">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>

    <div class="pick-card2">
        <div class="banner-back">
            <span onclick="window.history.back()">
                <i>返回</i>
            </span>帮我选卡
        </div>
        <div class="scroll-y">
            <div class="pick-title">
                <h1>02您经常在哪方面消费</h1>
                <small>选择您的主要消费爱好，不要超过4项</small>
            </div>
            <div class="pick-feature">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <img tagid="21" src="../img/smart/2/czjy.png" alt="车主加油">
                            <span>车主加油</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="22" src="../img/smart/2/csk.png" alt="超市卡">
                            <span>超市卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="23" src="../img/smart/2/wgk.png" alt="网购卡">
                            <span>网购卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="24" src="../img/smart/2/kfk.png" alt="咖啡卡">
                            <span>咖啡卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="25" src="../img/smart/2/dyk.png" alt="电影卡">
                            <span>电影卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="26" src="../img/smart/2/ktk.png" alt="卡通卡">
                            <span>卡通卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="27" src="../img/smart/2/yxk.png" alt="游戏卡">
                            <span>游戏卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="28" src="../img/smart/2/lyk.png" alt="旅游卡">
                            <span>旅游卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="29" src="../img/smart/2/msk.png" alt="美食卡">
                            <span>美食卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="30" src="../img/smart/2/jdk.png" alt="酒店卡">
                            <span>酒店卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="31" src="../img/smart/2/nxk.png" alt="女性卡">
                            <span>女性卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img tagid="32" src="../img/smart/2/htk.png" alt="海淘卡">
                            <span>海淘卡</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="next">
                <a href="smart-select.html" class="btn">上一步</a>
                <a onclick="next()" class="btn btn-red">下一步</a>
            </div>
        </div>
    </div>

    <!-- scripts here -->
    <script type="text/javascript" src="../js/main.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../public/js/loan/mui.min.js"></script>
    <script>
        var tags = [];
        var nomerImage = {
            "21": "../img/smart/2/czjy.png",
            "22": "../img/smart/2/csk.png",
            "23": "../img/smart/2/wgk.png",
            "24": "../img/smart/2/kfk.png",
            "25": "../img/smart/2/dyk.png",
            "26": "../img/smart/2/ktk.png",
            "27": "../img/smart/2/yxk.png",
            "28": "../img/smart/2/lyk.png",
            "29": "../img/smart/2/msk.png",
            "30": "../img/smart/2/jdk.png",
            "31": "../img/smart/2/nxk.png",
            "32": "../img/smart/2/htk.png",
        };
        var dianImage = {
            "21": "../img/smart/2/czjy_dian.png",
            "22": "../img/smart/2/csk_dian.png",
            "23": "../img/smart/2/wgk_dian.png",
            "24": "../img/smart/2/kfk_dian.png",
            "25": "../img/smart/2/dyk_dian.png",
            "26": "../img/smart/2/ktk_dian.png",
            "27": "../img/smart/2/yxk_dian.png",
            "28": "../img/smart/2/lyk_dian.png",
            "29": "../img/smart/2/msk_dian.png",
            "30": "../img/smart/2/jdk_dian.png",
            "31": "../img/smart/2/nxk_dian.png",
            "32": "../img/smart/2/htk_dian.png",
        };
        $(function () {

            var tagsStr = sessionStorage.getItem("tags2");
            if (tagsStr == null || tagsStr == undefined)
                tags = [];
            else
                tags = tagsStr.split(",");
            if (tags.length > 0) {
                $.each(document.getElementsByTagName('li'), function (index, el) {
                    var a = el.childNodes;
                    if (a.length == 0)
                        return;
                    a = a[0].childNodes;
                    if (a.length == 0)
                        return;
                    var img = $(a[0]);
                    if (tags.contains(img.attr("tagid")))
                        img.attr("src", dianImage[img.attr("tagid")]);
                    else
                        img.attr("src", nomerImage[img.attr("tagid")]);
                });
            }

            $(".pick-feature ul li a img").click(function () {
                var tagId = $(this).attr("tagid");
                var srcs = $(this).attr("src");
                if (srcs.indexOf("_dian") == -1) {
                    if (tags.length >= 3) {
                        mui.alert("最多选择3个");
                        return;
                    }
                    $(this).attr("src", dianImage[tagId]);
                    tags.push(tagId);
                } else {
                    tags.remove(tagId);
                    $(this).attr("src", nomerImage[tagId]);
                }
            });
        });

        function next() {
            window.location.href = "smart-select3.html";
            sessionStorage.setItem("tags2", tags);
        }
    </script>
</body>

</html>